/* import { useState, useEffect } from 'react'
// import counterStore from './store/counterStore.js'
// import personStore from './store/personStore.js'
import { useStore } from './store/index.js'
import { observer } from 'mobx-react-lite'
import Foo from './component/Foo.jsx'
import Bar from './component/Bar.jsx' */
import Foo from './component/Bar'
import Bar from './component/Bar'
import { observer } from 'mobx-react-lite'
function App() {
/*   useEffect(() => {
    store.personStore.getSingers()  // 异步代码
  }, []) */
  

  return (
    /* <div>
      <button onClick={() => store.counterStore.addCount()}>{store.counterStore.count}</button>
      <ul onClick={() => store.counterStore.changeList()}>
        {
          store.counterStore.filterList.map(item => {
            return <li key={item}>{item}</li>
          })
        }
      </ul>

      <ul>
        {
          store.personStore.singers.map(item => {
            return <li key={item.name}>{item.name}</li>
          })
        }
      </ul>
  
      </div> */
      <div>
        <Foo></Foo>
        <Bar></Bar>
      </div>

  )
}

export default observer(App)